import React, { RefObject, useRef } from 'react';
import { NextPage } from 'next';
import PrismicRichText from 'prismic-richtext';

import getSentryClient from '../../utils/sentry';
import { getProductPage } from '../../prismic/api';
import { ProductPageData } from '../../typings/entities';
import Hero from '../../components/main/product/Hero';
import Why from '../../components/main/Why';
import Review from '../../components/main/product/Review';
import How from '../../components/main/How';
import FAQ from '../../components/main/FAQ';
import Offers, { convertOffer } from '../../components/main/Offers';
import ErrorPage from '../_error';
import ProductSEO from '../../components/ProductSEO';
import { Header } from '../../components/main/product/Header';
import RichText from '../../components/RichText';
import Cyber from '../../components/main/product/cyber';

interface PageProps {
  product?: ProductPageData;
  namespacesRequired?: string[];
  hardCodedSlug?: string;
  error?: boolean;
}

export type THardcodedPagesSlugs = 'assurance-cybercriminalite';
const HARDCODED_PAGES: Record<THardcodedPagesSlugs, NextPage> = {
  'assurance-cybercriminalite': Cyber
};

const Product: NextPage<PageProps> = ({ product, hardCodedSlug, error }) => {
  // Important : do not declare a ref before those early returns. They might crash react.
  if (error) {
    return <ErrorPage statusCode={404} />;
  }

  if (hardCodedSlug) {
    return HARDCODED_PAGES[hardCodedSlug]({ product });
  }

  const heroRef: RefObject<Hero> = useRef();
  const {
    product_name,
    product_shortname,
    product_cta_link,
    product_short_description,
    product_illustration,
    product_starting_price,
    product_price_hover_text,
    header_cta_label,
    why_title,
    why_perks,
    review_title,
    reviews,
    how_it_works_title,
    how_it_works_steps,
    faq_link,
    faq_questions,
    faq_title,
    first_offer,
    second_offer,
    third_offer,
    offers_title,
    offers_find_cta_label,
    offers_find_cta_link,
    seo_description,
    seo_title
  } = product;

  return (
    <>
      <ProductSEO
        title={seo_title}
        description={seo_description}
        productName={product_name}
        imageURL={product_illustration.url}
        shortDescription={PrismicRichText.asText(product_short_description)}
        startingPrice={product_starting_price}
      />
      <Header
        heroRef={heroRef}
        CTALink={product_cta_link}
        CTALabel={header_cta_label}
      />
      <Hero
        ref={heroRef}
        name={product_name}
        CTALink={product_cta_link}
        shortName={product_shortname}
        shortDescription={product_short_description}
        illustration={product_illustration}
        startingPrice={product_starting_price}
        hoverText={product_price_hover_text}
      />
      <Why title={why_title} items={why_perks} />
      <Review title={review_title} reviews={reviews} />
      <How title={how_it_works_title} steps={how_it_works_steps} />
      <FAQ
        title={faq_title}
        items={faq_questions.map(({ faq_question_title, faq_question_answer }) => (
          { title: faq_question_title, answer: <RichText content={faq_question_answer} /> }
        ))}
        link={faq_link}
      />
      <Offers
        title={offers_title}
        offers={
          [first_offer, second_offer, third_offer].filter((offer) => !!offer?.data)
            .map((offer) => convertOffer(offer))
        }
        CTAFindLabel={offers_find_cta_label || 'Je trouve mon offre sur-mesure'}
        CATFindLink={offers_find_cta_link}
        CTAButtonColor="white"
      />
    </>
  );
};

Product.getInitialProps = async ({ req, query }): Promise<PageProps> => {
  try {
    const slug = (query.slug as string);
    const product = await getProductPage(req, slug);
    return {
      hardCodedSlug: Object.keys(HARDCODED_PAGES).indexOf(slug) !== -1 ? slug : null,
      product: product.data,
      namespacesRequired: ['common']
    };
  } catch (err) {
    if (err.status) {
      getSentryClient().captureException(new Error(
        `Cannot fetch product page ${query.slug} ${err.status ? `status ${err.status}` : ''}`
      ));
    }
    return { error: true, namespacesRequired: ['common'] };
  }
};

export default Product;